@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    font-size: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    background-color: #ea2c32;
    background-image: url(../img/index/bg0.png);
    background-size: 100% 100%;
}

// 主页面
.listenWeb,
.playLoveWeb {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .comtent1 {
        // 主体
        height: 90%;
        overflow: hidden;
        text-align: center;
        .com_1 {
            margin: 0.4rem auto 0;
            text-align: center;
            img {
                width: 5.32rem;
                height: 2.80rem;
            }
        }
        .com_2 {
            margin: 1.3rem auto 0;
            text-align: center;
            position: relative;
            img {
                width: 4.02rem;
                height: 2.61rem;
                box-shadow: 0px 14px 38px 3px #00000063;
            }
            textarea {
                position: absolute;
                top: 31%;
                right: 50%;
                transform: translate(112%, 0%);
                resize: none;
                width: 1.46rem;
                height: 1rem;
                background: transparent;
                outline: none;
                font-size: 0.1rem;
                line-height: 0.26rem;
                color: #ec788d;
                font-weight: bold;
                text-indent: 2em;
                border: none;
            }
        }
        button {
            margin-top: 1rem;
            width: 1.84rem;
            height: 0.4rem;
            background: #fff;
            color: #dc3539;
            line-height: 0.4rem;
            text-align: center;
            font-size: 0.24rem;
            font-weight: bold;
            border: none;
            border-radius: 0.15rem;
            outline: none;
        }
    }
    .footer {
        // 底部logo
        height: 10%;
        text-align: center;
        img {
            height: 0.52rem;
            width: 2.22rem;
            margin-top: 0.25rem;
        }
    }
}

// 播放录音
.playLoveWeb {
    display: none;
    .comtent2 {
        height: 90%;
        overflow: hidden;
        text-align: center;
        .com_one {
            margin: 0.4rem auto 0;
            text-align: center;
            img {
                width: 5.32rem;
                height: 2.80rem;
            }
        }
        .com_two {
            background: #f8f6e1;
            margin: 0.5rem auto 0;
            width: 5.15rem;
            height: 3.7rem;
            border: 1px solid #f4eb7f;
            border-radius: 0.1rem;
            .com_two_1 {
                height: 1.72rem;
                position: relative;
                overflow: hidden;
                p {
                    text-align: left;
                    font-size: 0.2rem;
                    margin: 0.24rem 0 0 0.11rem;
                    font-weight: bold;
                }
                .recordBtn {
                    width: 1.13rem;
                    height: 1.5rem;
                    position: absolute;
                    top: 25%;
                    left: 50%;
                    transform: translate(-50%, 0%) scale(0.7);
                    text-align: center;
                    .iBtn {
                        background: #fff;
                        width: 1.13rem;
                        height: 1.13rem;
                        border: 5px solid #afaea3;
                        border-radius: 50%;
                        box-sizing: border-box;
                        position: relative;
                        .iBox {
                            width: 60%;
                            height: 60%;
                            background: #de2428;
                            border-radius: 50%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            text-align: center;
                            i {
                                font-size: 0.3rem;
                                color: #fff;
                                margin: 0 auto;
                                line-height: 200%;
                            }
                        }
                    }
                    .sonic {
                        //播放声波
                        position: absolute;
                        top: 50%;
                        right: -75%;
                        transform: translate(0, -50%);
                        display: none;
                        img {
                            height: 0.64rem;
                            width: 0.5rem;
                        }
                    }
                }
            }
            .com_two_2 {
                width: 100%;
                height: 2rem;
                text-align: center;
                p {
                    text-align: left;
                    font-size: 0.2rem;
                    margin-left: 0.11rem;
                    font-weight: bold;
                }
                textarea {
                    margin-top: 0.3rem;
                    width: 4.65rem;
                    height: 1rem;
                    border-radius: 0.1rem;
                    border: 1px solid#dc3539;
                    outline: none;
                    font-size: 0.18rem;
                    padding: 0.1rem;
                    color: #ec788d;
                    box-sizing: border-box;
                    resize: none;
                    font-weight: bold;
                    text-indent: 2em;
                }
            }
        }
        button {
            margin-top: 0.8rem;
            width: 1.84rem;
            height: 0.4rem;
            background: #fff;
            color: #dc3539;
            line-height: 0.4rem;
            text-align: center;
            font-size: 0.24rem;
            font-weight: bold;
            border: none;
            border-radius: 0.15rem;
            outline: none;
        }
    }
}